<!-- 没有用 -->

<template>
	<view class="DatePicker" v-if="isShow" @touchmove.stop.prevent>
		<view class="bg" v-if="isShow" @tap="bgClick" @touchmove.stop.prevent>
		</view>
		<view class="content">
			<view class="btns">
				<button class="cancel" @tap="cancelClick">取消</button>
				<button class="determine" @tap="determineClick">确定</button>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column v-if="dateType=='yM' || dateType=='yMd' || dateType=='yMdh'">
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column v-if="dateType=='yMd' || dateType=='yMdh'">
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
				<picker-view-column v-if="dateType=='yMdh'">
					<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
				</picker-view-column>
				<picker-view-column v-if="dateType=='yq'">
					<view class="item" v-for="(item,index) in quarters" :key="index">第{{item}}季度</view>
				</picker-view-column>
				<picker-view-column v-if="dateType=='yw'">
					<view class="item" v-for="(item,index) in weeks" :key="index">第{{item}}周</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	/**
	 * DatePicker 日期选择
	 * @property {String} dateType 日期样式 y,yM,yMd,yMdh-年月日时,yq-年和季度,yw-年和周
	 * @property {Number} begin... 开始时间
	 * @property {Number} end... 结束时间
	 * @property {Number} select... 默认选择的时间
	 * @event {Function} determineClick 点击确定按钮时触发 回调选择的时间
	 * @event {Function} close 点击取消按钮和空白处时触发
	 */
	export default {
		name: 'DatePicker',
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			dateType: {
				type: String,
				default: "y" //y,yM,yMd,yMdh,yq,yw
			},
			"beginYear": {
				type: Number,
				default: 0
			},
			"beginMonth": {
				type: Number,
				default: 1
			},
			"beginDay": {
				type: Number,
				default: 1
			},
			"beginHour": {
				type: Number,
				default: 1
			},
			"beginWeek": {
				type: Number,
				default: 1
			},
			"beginQuarter": {
				type: Number,
				default: 1
			},
			"endYear": {
				type: Number,
				default: 0
			},
			"endMonth": {
				type: Number,
				default: 12
			},
			"endDay": {
				type: Number,
				default: 1
			},
			"endHour": {
				type: Number,
				default: 1
			},
			"endWeek": {
				type: Number,
				default: 1
			},
			"endQuarter": {
				type: Number,
				default: 4
			},
			"selectYear": {
				type: Number,
				default: 1
			},
			"selectMonth": {
				type: Number,
				default: 1
			},
			"selectDay": {
				type: Number,
				default: 1
			},
			"selectHour": {
				type: Number,
				default: 1
			},
			"selectWeek": {
				type: Number,
				default: 1
			},
			"selectQuarter": {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				years: [],
				months: [],
				days: [],
				hours: [],
				minutes: [],
				quarters: [],
				weeks: [],
				year: this.selectYear,
				month: this.selectMonth,
				day: this.selectDay,
				hour: this.selectHour,
				quarter: this.selectQuarter,
				week: this.selectWeek,
				value: [0],
				indicatorStyle: `height: 30px;`
			}
		},
		created() {
			this.initYears();
			if (this.dateType == "yM") {
				this.initMonths(this.selectYear);
			} else if (this.dateType == "yMd") {
				this.initMonths(this.selectYear);
				this.initDays(this.selectYear, this.selectMonth);
			} else if (this.dateType == "yMdh") {
				this.initMonths(this.selectYear);
				this.initDays(this.selectYear, this.selectMonth);
				this.initHours(this.selectYear, this.selectMonth, this.selectDay);
			} else if (this.dateType == "yq") {
				this.initQuarters(this.selectYear);
			} else if (this.dateType == "yw") {
				this.initWeeks(this.selectYear);
			}

			let yearIdnex = _indexArray(this.years, this.selectYear);
			let monthIdnex = _indexArray(this.months, this.selectMonth);
			let dayIdnex = _indexArray(this.days, this.selectDay);
			let hourIdnex = _indexArray(this.hours, this.selectHour);
			let quarterIdnex = _indexArray(this.quarters, this.selectQuarter);
			let weekIdnex = _indexArray(this.weeks, this.selectWeek);

			if (this.dateType == "yM") {
				this.value = [yearIdnex, monthIdnex];
			} else if (this.dateType == "yMd") {
				this.value = [yearIdnex, monthIdnex, dayIdnex];
			} else if (this.dateType == "yMdh") {
				this.value = [yearIdnex, monthIdnex, dayIdnex, hourIdnex];
			} else if (this.dateType == "yq") {
				this.value = [yearIdnex, quarterIdnex];
			} else if (this.dateType == "yw") {
				this.value = [yearIdnex, weekIdnex];
			} else {
				this.value = [yearIdnex, monthIdnex, dayIdnex];
			}
			console.log(JSON.stringify(this.selectHour));
		},
		mounted() {

		},
		methods: {
			initYears() {
				var years = [];
				for (let i = this.beginYear; i <= this.endYear; i++) {
					years.push(i)
				}
				this.years = years;
			},
			initMonths(selectYear) {
				var months = [];
				if (this.beginYear == selectYear) {
					for (let i = this.beginMonth; i <= 12; i++) {
						months.push(i)
					}
				} else if (this.endYear == selectYear) {
					for (let i = 1; i <= this.endMonth; i++) {
						months.push(i)
					}
				} else if (this.endYear == selectYear == this.beginYear) {
					for (let i = this.beginMonth; i <= this.endMonth; i++) {
						months.push(i)
					}
				} else {
					for (let i = 1; i <= 12; i++) {
						months.push(i)
					}
				}
				this.months = months;
			},
			initDays(selectYear, selectMonth) {
				var days = []

				if (this.beginYear == selectYear && this.beginMonth == selectMonth) {
					for (let i = this.beginDay; i <= getDayNum(this.beginYear, this.beginMonth); i++) {
						days.push(i)
					}
				} else if (this.endYear == selectYear && this.endMonth == selectMonth) {
					for (let i = 1; i <= this.endDay; i++) {
						days.push(i)
					}
				} else {
					for (let i = 1; i <= getDayNum(selectYear, selectMonth); i++) {
						days.push(i)
					}
				}
				this.days = days;
			},
			initHours(selectYear, selectMonth, selectDay) {
				var hours = []
				if (this.beginYear == selectYear && this.beginMonth == selectMonth && this.beginDay == selectDay) {
					for (let i = this.beginHour; i <= 24; i++) {
						hours.push(i)
					}
				} else if (this.endYear == selectYear && this.endMonth == selectMonth && this.endDay == selectDay) {
					for (let i = 1; i <= this.endHour; i++) {
						hours.push(i)
					}
				} else {
					for (let i = 1; i <= 24; i++) {
						hours.push(i)
					}
				}
				this.hours = hours;
			},
			initWeeks(selectYear) {
				var weeks = [];
				if (this.beginYear == selectYear) {
					for (let i = this.beginWeek; i <= 4; i++) {
						weeks.push(i)
					}
				} else if (this.endYear == selectYear) {
					for (let i = 1; i <= this.endWeek; i++) {
						weeks.push(i)
					}
				} else {
					for (let i = 1; i <= getWeekOfYear(selectYear); i++) {
						weeks.push(i)
					}
				}
				console.log(JSON.stringify(weeks));
				this.weeks = weeks;
			},
			initQuarters(selectYear) {
				var quarters = [];
				if (this.beginYear == selectYear) {
					for (let i = this.beginQuarter; i <= 4; i++) {
						quarters.push(i)
					}
				} else if (this.endYear == selectYear) {
					for (let i = 1; i <= this.endQuarter; i++) {
						quarters.push(i)
					}
				} else {
					for (let i = 1; i <= 4; i++) {
						quarters.push(i)
					}
				}
				this.quarters = quarters;
			},
			bindChange(e) {
				const val = e.detail.value;
				var y = this.years[val[0]];
				this.year = y;
				if (this.dateType == "yM") {
					var m = this.months[val[1]];
					this.month = m;
					this.initMonths(y);
				} else if (this.dateType == "yMd") {
					var m = this.months[val[1]];
					var d = this.days[val[2]];
					this.month = m;
					this.day = d;
					this.initMonths(y);
					this.initDays(y, m);
				} else if (this.dateType == "yMdh") {
					var m = this.months[val[1]];
					var d = this.days[val[2]];
					var h = this.days[val[3]];
					this.month = m;
					this.day = d;
					this.hour = h;
					this.initMonths(y);
					this.initDays(y, m);
					this.initHours(y, m, d);
				} else if (this.dateType == "yq") {
					var q = this.quarters[val[1]];
					this.quarter = q;
					this.initQuarters(y);
				} else if (this.dateType == "yw") {
					var w = this.weeks[val[1]];
					this.week = w;
					this.initWeeks(y);
				}
			},
			bgClick() {
				this.$emit("close", null);
			},
			cancelClick() {
				this.$emit("close", null);
			},
			determineClick() {
				this.$emit("close", null);
				var dic = {};
				dic["y"] = this.year;
				if (this.dateType == "yM") {
					dic["M"] = this.month;
				} else if (this.dateType == "yMd") {
					dic["M"] = this.month;
					dic["d"] = this.day;
				} else if (this.dateType == "yMdh") {
					dic["M"] = this.month;
					dic["d"] = this.day;
					dic["h"] = this.hour;
				} else if (this.dateType == "yq") {
					dic["q"] = this.quarter;
				} else if (this.dateType == "yw") {
					dic["w"] = this.week;
				}
				this.$emit("determineClick", dic);
			}
		}
	}

	function _indexArray(array, item) {
		for (var index in array) {
			var _item = array[index];
			if (_item === item) return parseInt(index);
		}
	}

	function _inArray(array, item) {
		for (var index in array) {
			var _item = array[index];
			if (_item === item) return true;
		}
		return false;
	}

	function getDayNum(year, month) {
		if (_inArray([1, 3, 5, 7, 8, 10, 12], month)) {
			return 31;
		} else if (_inArray([4, 6, 9, 11], month)) {
			return 30;
		} else if (isLeapYear(year)) {
			return 29;
		} else {
			return 28;
		}
	}

	function isLeapYear(year) {
		return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0);
	}


	function getWeekOfYear(year) {
		var today = new Date(year + "-12-31");
		var firstDay = new Date(today.getFullYear(), 0, 1);
		var dayOfWeek = firstDay.getDay();
		var spendDay = 1;
		if (dayOfWeek != 0) {
			spendDay = 7 - dayOfWeek + 1;
		}
		firstDay = new Date(today.getFullYear(), 0, 1 + spendDay);
		var d = Math.ceil((today.valueOf() - firstDay.valueOf()) / 86400000);
		var result = Math.ceil(d / 7);
		return result + 1;
	};


	/**
	 * 根据年份计算总周数
	 * @param year
	 * @returns {number}
	 */
	function getNumOfWeeks(year) {
		//设置为这一年开始日期
		var startDateOfYear = new Date(year, 0, 1);
		//计算这一年有多少天
		var daysOfYear = ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) ? 366 : 365;
		//366（365）/7=52.2(52.1)，所以一般一年有52周余1天或者2天，当这一年有366天时且第一天是周日，那么他的最后一天则是周一，这一年就有54周。
		var weekNum = 53;
		//当年份是闰年且第一天是周日时有54周
		if (startDateOfYear.getDay() == 0 && daysOfYear == 366) {
			weekNum = 54;
		}
		return weekNum;
	}
	// console.log(getWeekOfYear());
	// console.log(getNumOfWeeks(2012))
	// console.log(weekGetDate(2012, 54));

	Date.prototype.Format = function(fmt) { //author: meizz   
		var o = {
			"M+": this.getMonth() + 1, //月份   
			"d+": this.getDate(), //日   
			"h+": this.getHours(), //小时   
			"m+": this.getMinutes(), //分   
			"s+": this.getSeconds(), //秒   
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度   
			"S": this.getMilliseconds() //毫秒   
		};
		if (/(y+)/.test(fmt))
			fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		for (var k in o)
			if (new RegExp("(" + k + ")").test(fmt))
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	};

	//通过周取日期范围   year 年   weeks 周
	function weekGetDate(year, weeks) {
		var date = new Date(year, "0", "1");
		var time = date.getTime(); // 获取当前星期几,0:星期一     
		var _week = date.getDay(); //当这一年的1月1日为周日时则本年有54周,否则没有54周,没有则去除第54周的提示    
		if (_week != 0) { //一年53周情况 
			if (weeks == 54) {
				return '今年没有54周';
			}
			var cnt = 0; // 获取距离周末的天数    
			if (_week == 0) {
				cnt = 7;
			} else if (_week == 1) {
				cnt = 6;
			} else if (_week == 2) {
				cnt = 5;
			} else if (_week == 3) {
				cnt = 4;
			} else if (_week == 4) {
				cnt = 3;
			} else if (_week == 5) {
				cnt = 2;
			} else if (_week == 6) {
				cnt = 1;
			}
			cnt += 1; //加1表示以星期一为一周的第一天    // 将这个长整形时间加上第N周的时间偏移    
			time += cnt * 24 * 3600000; //第2周开始时间 
			var nextYear = new Date(parseInt(year, 10) + 1, "0", "1");
			var nextWeek = nextYear.getDay();
			var lastcnt = 0; //获取最后一周开始时间到周末的天数    
			if (nextWeek == 0) {
				lastcnt = 6;
			} else if (nextWeek == 1) {
				lastcnt = 0;
			} else if (nextWeek == 2) {
				lastcnt = 1;
			} else if (nextWeek == 3) {
				lastcnt = 2;
			} else if (nextWeek == 4) {
				lastcnt = 3;
			} else if (nextWeek == 5) {
				lastcnt = 4;
			} else if (nextWeek == 6) {
				lastcnt = 5;
			}
			if (weeks == 1) { //第1周特殊处理    // 为日期对象 date 重新设置成时间 time
				var start = date.Format("yyyy-MM-dd");
				date.setTime(time - 24 * 3600000);

				return start + "-----" + date.Format("yyyy-MM-dd");
			} else if (weeks == 53) { //第53周特殊处理    
				var start = time + (weeks - 2) * 7 * 24 * 3600000; //第53周开始时间    
				var end = time + (weeks - 2) * 7 * 24 * 3600000 + lastcnt * 24 * 3600000 - 24 * 3600000; //第53周结束时间
				date.setTime(start);
				var _start = date.Format("yyyy-MM-dd");
				date.setTime(end);
				var _end = date.Format("yyyy-MM-dd");
				return _start + "---" + _end;
			} else {
				var start = time + (weeks - 2) * 7 * 24 * 3600000; //第n周开始时间    
				var end = time + (weeks - 1) * 7 * 24 * 3600000 - 24 * 3600000; //第n周结束时间
				date.setTime(start);
				var _start = date.Format("yyyy-MM-dd");
				date.setTime(end);
				var _end = date.Format("yyyy-MM-dd");
				return _start + "---" + _end;
			}
		} else { //一年54周情况    
			var cnt = 0; // 获取距离周末的天数    
			if (_week == 0 && weeks == 1) { //第一周    
				cnt = 0;
			} else if (_week == 0) {
				cnt = 7;
			} else if (_week == 1) {
				cnt = 6;
			} else if (_week == 2) {
				cnt = 5;
			} else if (_week == 3) {
				cnt = 4;
			} else if (_week == 4) {
				cnt = 3;
			} else if (_week == 5) {
				cnt = 2;
			} else if (_week == 6) {
				cnt = 1;
			}
			cnt += 1; //加1表示以星期一为一周的第一天    
			// 将这个长整形时间加上第N周的时间偏移    
			time += 24 * 3600000; //第2周开始时间    
			var nextYear = new Date(parseInt(year, 10) + 1, "0", "1");
			var nextWeek = nextYear.getDay();
			var lastcnt = 0; //获取最后一周开始时间到周末的天数    
			if (nextWeek == 0) {
				lastcnt = 6;
			} else if (nextWeek == 1) {
				lastcnt = 0;
			} else if (nextWeek == 2) {
				lastcnt = 1;
			} else if (nextWeek == 3) {
				lastcnt = 2;
			} else if (nextWeek == 4) {
				lastcnt = 3;
			} else if (nextWeek == 5) {
				lastcnt = 4;
			} else if (nextWeek == 6) {
				lastcnt = 5;
			}
			if (weeks == 1) { //第1周特殊处理
				var start = date.Format("yyyy-MM-dd");
				date.setTime(time - 24 * 3600000);
				alert(start + '--' + date);
				return _start + "---" + date;
			} else if (weeks == 54) { //第54周特殊处理    
				var start = time + (weeks - 2) * 7 * 24 * 3600000; //第54周开始时间    
				var end = time + (weeks - 2) * 7 * 24 * 3600000 + lastcnt * 24 * 3600000 - 24 * 3600000; //第53周结束时间
				date.setTime(start);
				var _start = date.Format("yyyy-MM-dd");
				date.setTime(end);
				var _end = date.Format("yyyy-MM-dd");
				return _start + "---" + _end;
			} else {
				var start = time + (weeks - 2) * 7 * 24 * 3600000; //第n周开始时间    
				var end = time + (weeks - 1) * 7 * 24 * 3600000 - 24 * 3600000; //第n周结束时间
				date.setTime(start);
				var _start = date.Format("yyyy-MM-dd");
				date.setTime(end);
				var _end = date.Format("yyyy-MM-dd");
				return _start + "---" + _end;
			}
		}
	}
</script>

<style>
	.DatePicker {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.bg {
		background-color: rgba(0, 0, 0, .3);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.content {
		width: 100%;
		position: absolute;
		bottom: 0;
	}

	.btns {
		background-color: white;
		border-bottom: 1px solid rgba(0, 0, 0, .1);
		text-align: left;
		position: relative;
	}

	button {
		display: inline-block;
		background-color: transparent;

	}

	button:after {
		border: 0px solid rgba(0, 0, 0, .2) !important;
	}

	.cancel {
		color: #888;
	}

	.determine {
		color: #007aff;
		position: absolute;
		right: 0;
	}

	picker-view {
		padding-top: 10px;
		width: 100%;
		height: 400upx;
		background-color: rgb(255, 255, 255);
	}

	.item {
		line-height: 20px;
		text-align: center;
	}
</style>
